<template>
  <n-flex
    justify="space-between"
    align="center"
    class="mb-16"
  >
    <span class="his-title">历史记录</span>
    <n-input
      placeholder="搜索"
      style="width: 200px"
    >
      <template #prefix>
        <n-icon :component="Search" />
      </template>
    </n-input>
  </n-flex>
  <div class="box">
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="false"
      :bordered="false"
    />
  </div>
</template>

<script lang="ts" setup>
  import { Search } from '@vicons/ionicons5'

  const columns = [
    { key: 'name', title: '名称' },
    { key: 'type', title: '类型' },
    { key: 'status', title: '状态' },
    { key: 'money', title: '金额' }
  ]
  const data: any[] = []
</script>

<style scoped lang="scss">
  .his-title {
    font-size: $fs-xl;
    font-weight: bold;
  }
</style>
